window.onload =function(){
	var box = document.getElementById('box');
	alert(box.scrollWidth);
	alert(box.scrollHeight);
	//注意ie浏览器在指定的高度下获取scrollHeight会理解为获取有效内容的高度
	
	//对于元素的实际大小，scrollWidth和scrollHeight理解如下：
	  //1增加边框不同浏览器有不同解释：
	     // fireFox和Opera浏览器会增加边框的大小   220x220
	     // IE chrom 和Safari浏览器会忽略边框大小  200x200
	     // IE浏览器只显示它本来内容的高度  200x18
	  //2增加内边距最终值会等于原本大小加上内边距大小  220x220  IE为220x38
	  //3增加滚动条，最终值会等于原本大小减去滚动条大小 184x184  IE为184x18
	  //4增加外边距，无变化
	  //5增加内容溢出，Firefox，chrome和ie获取实际内容高度  Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的稍大。
	  
	  
	  
	  //offsetHeight和offsetWidth
	  //获取元素的实际大小
	  //增加边框最终值等于原本大小加上边框大小
	  //增加内边距最终值会等于原本大小加上内边距大小
	  //增加外边距，无变化
	  //增加滚动条，无变化，不会减小
	  
	  alert(box.offsetHeight);
	  alert(box.offsetWidth);
	  
	  
	  //总结
	  //对于元素大小的获取,一般是块级（block）元素并且以设置css大小的元素较为方便。
	  //如果是内联元素（inline）或者没有设置大小的元素就尤为麻烦
	  
	  //获取周边元素的大小
	  //1  box.clientLeft获取左边框的长度      box.clientTop获取上边框的长度
	  
	  //2获取元素相对父元素的位置，但是最好将其设置为绝对定位(元素嵌套)，否则有兼容性
	  //ps: 加上边框和内边距不会影响它的位置，但是加上外边距会累加
	  alert(box.offsetLeft);
	  alert(box.offsetTop);
	 
	 alert(box.offsetParent);//得到父元素
	 alert(box.offsetParent.tagName);//非ie是body 但是ie是html
	   alert(box.offsetParent.id);
	   alert(offsetTopAll(box));
	   
	   //
	   box.scrollTop =50;//设定初始值
	   alert(box.scrollTop);//获取滚动内容的上方位置
	   alert(box.scrollLeft);
	   scrollStart(box);//
	   
	   //getBoundingClientRect方法返回一个矩形对象，包含四个属性：left,top,right,和bottom分别表示元素各边与页面上边和左边的距离
	   alert(box.getBoundingClientRect().top);
	   alert(box.getBoundingClientRect(.right));
	   alert(box.getBoundingClientRect(.left));
	   alert(box.getBoundingClientRect(.bottom));
	   
	  //兼容
	  alert(getRecte(box).top);
	  
	   
	   
}

//多层嵌套最内层到边框的距离的算法
function offsetTopAll(element){
	var top = element.offsetTop;//第一层的距离
	var parent = element.offsetParent;
	
	while(parent!==null){
		top +=parent.offsetTop;
		parent = parent.offsetParent;
	}
	return top;
}


//滚动条滚动到初始的位置
function scrollStart(element){
	if(element.scrollTop!=0){
		element.scrollTo=0;
	}
}

//兼容性

function getRecte(element){
	var rect = element.getBoundingClientRect();
	var clientTop = document.documentElement.clientTop;
	var clientLeft =document.documentElement.clientLeft;
	
	return{
		top:rect.top - clientTop,
		bottom:rect.bottom-clientTop,
		left:rect.left -clientLeft,
		right:rect.right -clientLeft
				
	};
}
